<script setup>
import PageContainer from '@/components/PageContainer/src/PageContainer.vue';
import ContentWrap from '@/components/ContentWrap/src/ContentWrap.vue';
import { shortPlayApi } from '@/api/shortPlay'
import { formatDate } from '@/utils/formatTime'
import DealShortPlayDialog from './dealShortPlayDialog.vue';
import { ElMessageBox } from 'element-plus';

const tableData = ref([])
const loading = ref(false)
const dealShortPlayDialogRef = ref()


onMounted(() => {
  getList()
})

function getList() {
  loading.value = true
  shortPlayApi.getList().then(res => {
    tableData.value = res
    loading.value = false
  })
}
function handleClickAdd(row) {
  dealShortPlayDialogRef.value.showDialog(row, 'add')
}

function handleClickEdit(row) {
  dealShortPlayDialogRef.value.showDialog(row, 'edit')
}

function handleDel(row) {
  ElMessageBox.confirm('确定删除吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    shortPlayApi.delete({ id: row.id }).then(res => {
      ElMessage.success('删除成功')
      getList()
    })
  })
}

</script>

<template>
<!-- <PageContainer title="短剧管理"> -->
  <ContentWrap>
    <el-row justify="end">
      <el-button type="primary" @click="handleClickAdd('')">新增短剧</el-button>
    </el-row>
  </ContentWrap>
  <ContentWrap>
    <el-table :data="tableData" :loading="loading" row-key="id">
      <el-table-column label="短剧名称" prop="name" />
      <el-table-column label="短剧描述" prop="description" />
      <el-table-column label="创建时间" prop="createTime" >
        <template #default="scope">
          {{ formatDate(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" link size="mini" v-if="scope.row.parentId == 0" @click="handleClickAdd(scope.row)">新增</el-button>
          <el-button type="primary" link size="mini" @click="handleClickEdit(scope.row)">编辑</el-button>
          <el-button type="danger" link size="mini" @click="handleDel(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </ContentWrap>
  <DealShortPlayDialog ref="dealShortPlayDialogRef" :shortPlayList="tableData" @getList="getList" />
<!-- </PageContainer> -->
</template>


<style scoped lang="scss">

</style>